// 提供滚动方面的功能
// 非滚动优化模式通用

import { throttle } from 'lodash';

// 生成滚动事件的 handler
function handleMaker(wait) {
  return throttle((e) => {
    this.$emit('scroll', {
      x: e.target.scrollLeft,
      y: e.target.scrollTop
    });
  }, wait);
}

export default {
  props: {
    // 滚动事件节流间隔
    scrollDelay: {
      type: Number,
      required: false,
      default: 10
    }
  },
  data() {
    return {
      handleScroll: null
    };
  },
  watch: {
    scrollDelay(val) {
      // 移除旧的监听
      this.removeScrollListener();
      // 生成新的 handle 方法
      this.handleScroll = handleMaker.call(this, val);
      // 添加新的监听
      this.addScrollListener();
    }
  },
  methods: {
    // 增加滚动事件监听
    addScrollListener() {
      if (typeof this.handleScroll !== 'function') {
        // mounted 生命周期内调用这个方法的时候会进入这里的判断
        this.handleScroll = handleMaker.call(this, this.scrollDelay);
      }
      // 添加监听
      this.$refs.body.addEventListener('scroll', this.handleScroll);
    },
    // 移除滚动事件监听
    removeScrollListener() {
      this.$refs.body.removeEventListener('scroll', this.handleScroll);
    },
    // 外部调用的方法 返回顶部
    scrollToTop() {
      const smoothscroll = () => {
        const body = this.$refs.body;
        const currentScroll = body.scrollTop;
        if (currentScroll > 0) {
          window.requestAnimationFrame(smoothscroll);
          body.scrollTo(0, currentScroll - currentScroll / 5);
        }
      };
      smoothscroll();
    }
  }
};
